<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        body{
            background: url(images/1.jpg) no-repeat top center;
            height: 1000px;
        }
        .box{
            height: 150px;
            background: rgba(225,225,225,.3);
            text-align: center;
            padding-top: 25px;
        }
        .box img{
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function(){
            var pic1 = document.getElementById("pic1");
            var pic2 = document.getElementById("pic2");
            var pic3 = document.getElementById("pic3");
            var pic4 = document.getElementById("pic4");
            var pic5 = document.getElementById("pic5");
            pic1.onclick = function(){
                document.body.style.backgroundImage = "url(images/1.jpg)";
            }
            pic2.onclick = function(){
                document.body.style.backgroundImage = "url(images/2.jpg)";
            }
            pic3.onclick = function(){
                document.body.style.backgroundImage = "url(images/3.jpg)";
            }
            pic4.onclick = function(){
                document.body.style.backgroundImage = "url(images/4.jpg)";
            }
            pic5.onclick = function(){
                document.body.style.backgroundImage = "url(images/5.jpg)";
            }

        }
    </script>
</head>
<body>
<div class="box">
    <img src="images/1.jpg" alt=" " width="200px" id="pic1">
    <img src="images/2.jpg" alt=" " width="200px" id="pic2">
    <img src="images/3.jpg" alt=" " width="200px" id="pic3">
    <img src="images/4.jpg" alt=" " width="200px" id="pic4">
    <img src="images/5.jpg" alt=" " width="200px" id="pic5">
</div>
</body>
</html>